<template>
  <!-- 顶部栏 -->
  <div class="top">
    <!-- 工具栏 -->
    <div class="tool-wrap">
      <!-- 三个圆点 主页 缩小 放大 -->
      <ul class="tool-circle">
        <li><span class="iconfont iconzhuye"></span></li>
        <li><span class="iconfont iconsuoxiao"></span></li>
        <li><span class="iconfont iconicon--"></span></li>
      </ul>
      <!-- 左右箭头 -->
      <div class="arrow">
        <div><span class="iconfont iconzuo"></span></div>
        <div style="transform:translateY(-1px) rotate(180deg);">
          <span class="iconfont iconzuo"></span></div>
      </div>
    </div>
    <!-- 搜索栏 -->
    <div class="search">
      <el-input v-model="search" placeholder="搜索" prefix-icon="el-icon-search"
        clearable>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #f9f9f9;
  .tool-wrap {
    display: flex;
    justify-content: space-between;
    width: 260px;
    margin-left: 10px;
  }
}
.tool-circle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tool-circle li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #dd6d60;
}
.tool-circle li:nth-child(2) {
  background-color: #dcc060;
}
.tool-circle li:nth-child(3) {
  background-color: #84bb58;
}
.tool-circle .iconfont {
  font-size: 14px;
  opacity: 0;
}
.iconsuoxiao,
.iconicon-- {
  position: relative;
  top: 1px;
}
.iconfont:hover {
  opacity: 1;
  transition: all 0.5s;
}
.arrow {
  display: flex;
  align-items: center;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin-left: 18px;
    border-radius: 50%;
    background-color: #f9f9f9;
    cursor: pointer;
    &:hover {
      background-color: #ebebeb;
      transition: all 0.5s;
    }
    .iconzuo {
      font-size: 18px;
      font-weight: 600;
      color: #666;
    }
  }
}
.search {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 15px;
  .el-input {
    width: 215px;
    ::v-deep.el-input__icon {
      line-height: 34px;
    }
  }
  ::v-deep .el-input__inner {
    height: 32px;
  }
}
</style>